<template>
  <div id="app">
    <div style="padding-bottom:50px">
      <!-- 搜索部分 -->
      <div class="store_search">
        <input
          type="text"
          placeholder="搜索商品名称"
          disabled
          placeholder-style="font-size:13px; color:#B8BAB9;"
          @click="jujiao"
        />
        <img src="/static/images/store/search.png" alt />
      </div>
      <!-- 轮播图部分 -->
      <div class="store_banner">
        <swiper class="swiper" autoplay circular interval="5000" @change="swiperChange">
          <swiper-item
            class="swiper-item"
            v-for="(item,index) in banners"
            :key="index"
            @click="jumpType(item.id)"
          >
            <img :class="{'img-item':true,active:currentIndex==index}" :src="item.pic" alt />
          </swiper-item>
        </swiper>
        <!-- 原点 -->
        <div class="indicator-box">
          <div
            :class="{indicator:true,'indicator-active':currentIndex==index}"
            v-for="(item,index) of banners"
            :key="index"
          ></div>
        </div>
      </div>
      <!-- 商品导航部分 -->
      <div class="store_nav">
        <!-- 九宫格 -->
        <div class="idx-nav">
          <ul>
            <li v-for="(item,index) in imgUrlList" :key="index">
              <div class="li" v-if="index < 10">
                <div class="menu-item" @click="handleJump(item.id)">
                  <img
                    :src="item.pic+'?x-oss-process=image/resize,m_fill,w_44,h_44/quality,Q_100'"
                    alt
                  />
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </li>
            <div class="menu-item" style="width:20%" @click="handleJump()">
              <img src="/static/images/index/allProduct.png" alt />
              <span>全部商品</span>
            </div>
          </ul>
        </div>
      </div>
      <!-- 热门商品部分 -->
      <div class="store_commodity">
        <div class="title_top flex align-center">
          <div class="title_left"></div>
          <div class="title_right flex-1">热门商品</div>
        </div>
        <ul>
          <li v-for="(item,index) of commodityList" :key="index" @click="productItemClick(item.id)">
            <div
              class="title"
              style="width: 100%; height: 330rpx; display: flex; justify-content: center; align-items: center;"
            >
              <img
                :src="item.coverImg+'?x-oss-process=image/resize,m_fill,w_330,h_330/quality,Q_100'"
                class="product-icon"
              />
            </div>
            <p>{{item.goodsName}}</p>
            <div class="integral">
              <span
                style="color: #F45247; font-size: 14px; margin-left: 10px;font-weight:800"
              >{{item.salePrice}}积分</span>
            </div>
          </li>
        </ul>
        <div class="store_footer" v-if="!loadMore">—— 已经到底啦 ——</div>
      </div>
    </div>
    <vueTabBar :selectNavIndex="number" :target="target"></vueTabBar>
  </div>
</template>

<script>
import { getBanner, getAllClassify, getPopularDetails } from "@/api/api";
import { mapGetters } from "vuex";
import vueTabBar from "@/components/tabbar";
export default {
  props: {},
  data() {
    return {
      number: 3,
      currentIndex: 0,
      // 轮播图
      banners: [
        // { imgUrl: '/static/images/timg.png' },
        // { imgUrl: '/static/images/timg1.png' },
        // { imgUrl: '/static/images/timg2.png' }
      ],
      pages: {
        pageIndex: 1,
        pageSize: 10,
        recommend: true
      },
      target: 0,
      // 九宫格
      imgUrlList: [],
      // 热门商品
      commodityList: [],
      loadMore: true
    };
  },
  components: { vueTabBar },
  computed: {
    ...mapGetters(["userInfo"])
  },
  onShow() {
    this.target += 1;
    wx.hideTabBar();
  },
  onLoad: function() {
    wx.hideTabBar({
      fail: function() {
        setTimeout(function() {
          wx.hideTabBar();
        }, 500);
      }
    });
  },
  created() {},
  mounted() {
    // 可以将当前状态的data重置为初始状态
    Object.assign(this.$data, this.$options.data());
    if (this.userInfo) {
      var identity = this.userInfo.identity;
      if (identity === "FINANCIAL") {
        this.number = 2;
      } else {
        this.number = 3;
      }
    } else {
      this.number = 3;
    }
    this.getPopularDetails();
    this.getBanner();
    this.getAllClassify();
  },
  watch: {},

  // 上拉加载更多
  onReachBottom() {
    this.getPopularDetails();
    console.log("more");
  },
  methods: {
    // banners 部分小圆点
    swiperChange(e) {
      this.currentIndex = e.mp.detail.current;
    },
    // 获取焦点时触发
    jujiao() {
      wx.navigateTo({ url: "/pages/store/children/commodityList/main?type=1" });
    },
    // 点击轮播图进入商品详情页
    jumpType(index) {
      wx.navigateTo({
        url: `/pages/store/children/bannerFuwenben/main?id=${index}`
      });
    },
    // 点击九宫格进入商品列表页
    handleJump(index1) {
      if (index1) {
        wx.navigateTo({
          url: `/pages/store/children/commodityList/main?classifyId=${index1}`
        });
      } else {
        wx.navigateTo({
          url: `/pages/store/children/commodityList/main?allType=1`
        });
      }
    },
    // 点击热门商品进入商品详情页
    productItemClick(index) {
      wx.navigateTo({
        url: `/pages/store/children/commodityDetails/main?classifyId=${index}`
      });
    },
    /**
     * 获取banner信息
     */
    async getBanner() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      const data = await getBanner();
      wx.hideLoading();
      if (!data.code) {
        this.banners = data;
      } else {
        wx.showToast({
          title: data.description,
          icon: "none",
          mask: true
        });
      }
    },
    /**
     * 获取全部分类
     */
    async getAllClassify() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      const res = await getAllClassify();
      wx.hideLoading();
      this.imgUrlList = res;
    },
    /**
     * 获取热门商品部分
     */
    async getPopularDetails() {
      // wx.showLoading({
      //   title: '加载中',
      //   icon: 'none',
      //   mask: true
      // });
      if (this.loadMore) {
        await getPopularDetails(this.pages).then(res => {
          console.log("商品列表", res.list);
          this.commodityList = this.commodityList.concat(res.list);
          ++this.pages.pageIndex;
          if (res.pages < this.pages.pageIndex) {
            this.loadMore = false;
          }
        });
      }
      // wx.hideLoading();
      // const data = await getPopularDetails(this.pages);
      // this.commodityList = data.list;
    }
  }
};
</script>

<style scoped lang="less">
#app {
  background-color: #f7f7f6;
}

// 搜索部分
.store_search {
  padding: 15px;
  height: 34px;
  position: relative;
  background-color: #fff;

  input {
    background-color: #f8f8f8;
    height: 34px;
    width: 100%;
    padding-left: 37px;
    box-sizing: border-box;
    border-radius: 2px;
    font-size: 13px;
  }

  img {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }
}

// 轮播图部分
.store_banner {
  background-color: #fff;
  padding-bottom: 15px;
  position: relative;

  .swiper {
    height: 170px;
  }

  img {
    width: 100%;
    height: 100% !important;
  }

  .swiper-item {
    padding: 0 15px;
    box-sizing: border-box;
    height: 170px;

    .img-item {
      width: 345px;
      height: 120px;
      z-index: 5;
      opacity: 0.5;
      position: absolute;
      top: 8px;
      border-radius: 4px;
    }

    .active {
      top: 0px;
      opacity: 1;
      z-index: 10;
      height: 138px;
      transition: all 0.2s ease-in 0s;
    }
  }
}

.indicator-box {
  position: absolute;
  bottom: 15px;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  .indicator {
    width: 16px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    margin-right: 10px;
  }
  .indicator-active {
    background: rgba(255, 255, 255, 1);
  }
}

// 商品导航部分
.store_nav {
  background-color: #fff;
  margin-bottom: 10px;

  .idx-nav {
    background-color: #fff;

    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 20%;
        // height: 86px;
      }
      .li {
        height: 86px;
      }
    }

    .menu-item {
      height: 86px;
      text-align: center;

      img {
        display: block;
        width: 44px;
        height: 44px;
        margin: 0 auto;
        padding-bottom: 8px;
      }

      span {
        color: #6b6b6b;
        font-size: 12px;
        font-family: PingFangSC;
        font-weight: 400;
      }
    }
  }
}

// 热门商品部分
.store_commodity {
  padding: 20px 15px 0;
  background-color: #fff;

  .title_top {
    height: 50px;
  }

  .title_left {
    width: 5px;
    height: 17px;
    background: linear-gradient(
      360deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(53, 181, 175, 1) 100%
    );
    border-radius: 3px;
    margin-right: 10px;
  }

  .title_right {
    font-size: 18px;
    font-weight: 700;
    color: rgba(2, 6, 4, 1);
    line-height: 25px;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 167px;
      // height: 262px;
      background-color: #fff;
      margin-bottom: 10px;
      font-family: PingFangSC;
      font-weight: 400;
      border-radius: 2px 2px 0 0;
      border: 1px solid rgba(247, 247, 246, 1);
      box-sizing: border-box;
    }
    .product-icon {
      width: 165px;
      height: 165px;
      border-radius: 2px 2px 0 0;
    }

    p {
      // height: 50px;
      box-sizing: border-box;
      font-weight: 700;
      margin: 10px;
      color: #081020;
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }

    .integral {
      padding-bottom: 10px;
    }
  }

  .store_footer {
    height: 63px;
    line-height: 63px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: #b8bab9;
  }
}
</style>
